<template>
  <view>
    <view>
      <u-form :model="signTask" ref="uForm" style="margin: 0 20rpx;">
        <u-form-item label-width="145" label="*签到类型" prop="typeText">
          <u-input :selectOpen="show1" type="select" placeholder="请选择" @click="show1 = true" v-model="signTask.typeText"/>
        </u-form-item>
        <u-form-item label-width="145" label="*开始时间" prop="signBeginTime">
          <u-input :selectOpen="show && isBegin" type="select" placeholder="请选择" v-model="signTask.signBeginTime" @click="beginDateTime" />
        </u-form-item>
        <u-form-item label-width="145" label="*结束时间" prop="signEndTime">
          <u-input :selectOpen="show && !isBegin" type="select"  placeholder="请选择" v-model="signTask.signEndTime" @click="endDateTime"  />
        </u-form-item>
      </u-form>
      <view v-show="show2">
        <view>
          <gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></gesture-lock>
        </view>
        <view class="uni-text">{{ text }}</view>
      </view>
      <view style="text-align: center;margin-top: 20rpx;">
        <u-button size="medium" shape="circle" type="primary" @click="submit" :ripple="true" ripple-bg-color="#a0cfff">提交</u-button>
      </view>
    </view>

    <u-select @confirm="confirm1" @cancel="show1 = false" v-model="show1" :list="list"></u-select>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm" @cancel="cancel"></u-picker>
  </view>
</template>

<script>
import GestureLock from '@/components/gesture_lock';
export default {
  components: {
    GestureLock
  },
  data() {

    return {
      password: [],
      text: '请绘制手势密码',
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      show2: false,
      show1: false,
      show: false,
      isBegin: false,
      list: [
        {
          value: 1,
          label: '一键签到'
        },
        {
          value: 2,
          label: '扫码签到'
        },
        {
          value: 3,
          label: '手势密码'
        },
      ],
      signTask: {
        courseId: '',
        type: 1,
        signBeginTime: '',
        signEndTime: '',
        typeText: '',
        extend: ''
      },
      rules: {
        typeText: [
          {
            required: true,
            message: '签到类型不能为空',
            trigger: 'blur'
          }
        ],
        signBeginTime: [
          {
            required: true,
            message: '开始时间不能为空',
            trigger: 'blur'
          }
        ],
        signEndTime: [
          {
            required: true,
            message: '结束时间不能为空',
            trigger: 'blur'
          }
        ]
      }

    };
  },
  onLoad(e) {
    this.signTask.courseId = e.courseId;
  },
  methods:{
    onEnd(data){
      if (this.password.length) {
        if (this.password.join('') === data.join('')) {
          this.text = '手势设定完成'
          this.password = [ ]
          this.signTask.extend = data.join();
          this.show2 = false;
        } else {
          this.text = '两次手势设定不一致'
          this.password = []
        }
      }else{
        this.text = '请确认手势设定'
        //data是密码数字数组
        this.password = data;
      }
    },
    confirm(v){
      if(v !== null && v !== undefined){
        let datetime = v.year + "-" + v.month + "-" + v.day + " " + v.hour + ":" + v.minute + ":" + v.second;
        if(this.isBegin){
          this.signTask.signBeginTime = datetime;
        }else {
          this.signTask.signEndTime = datetime;
        }
      }
    },
    confirm1(v){
      if(v !== null && v !== undefined){
        this.signTask.typeText = v[0].label;
        this.signTask.type = v[0].value;
        if(this.signTask.type === 3){
          // 设置手势密码
          this.show2 = true;
        }

      }
    },
    cancel(){
      this.show = false;
    },
    submit() {
      let that = this;
      if(this.signTask.type === 3){
        if(this.$u.test.isEmpty(this.signTask.extend)){
          this.$u.toast('未设置手势密码！');
          return;
        }
      }
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$u.api.postSignTask(that.signTask).then(res => {
            if(res.code === 200){
              this.$u.toast('成功！');
              uni.$emit("signInitial");
              // #ifndef H5
              uni.navigateBack({
                delta: 1
              });
              // #endif
              // #ifdef H5
              history.back()
              // #endif
            }
          })
        }
      })
    },
    beginDateTime(){
      this.isBegin = true;
      this.show = true;
    },
    endDateTime(){
      this.isBegin = false;
      this.show = true;
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  filters:{

  }
}
</script>

<style lang="scss">
.uni-text{
  font-size: 30upx;
  text-align: center;
  margin-top: 30upx;
}
</style>
